<template>
    <div class="view">
        <div class="page-statistics scrollRow">
            <template>
                <u-scrollRow :list="classList" label="sstClassName" match="classId" v-model="selClass" @change="classChange"></u-scrollRow>
            </template>
            <div class="m-con">
				<div class="poetyList">
                    <div class="title">标题</div>
                    <div class="score">平均分</div>
                    <div class="num">参与人数</div>
				</div>
				<div class="list">
					<div class="list-item" v-for="(item,index) in gameList" :key="index" @click="lookDetail(item.roomId)">
						<div class="title">{{item.roomName}}</div>
						<div class="score">{{item.average}}</div>
						<div class="num">{{item.count}}人</div>
					</div>
				</div>
                <div class="vTips_empty" v-if="!gameList || !gameList.length">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from '@/api/index';
export default {
    data(){
        return{
            userInfo:JSON.parse(localStorage.getItem('userInfo')),
            classList:[],
            selClass:{},    //所选class信息
            gameList:[]
        }
    },
    mounted(){
        this.getInit()
    },
    watch:{
    },
    methods:{
        getInit(){
            const { classList } = this.userInfo
            this.classList = classList&&classList.length? classList: []
            
			var choseClassId = sessionStorage.getItem('choseClassId')
			this.selClass = choseClassId?this.classList.find(item => {return item.classId == choseClassId}):this.classList[0]
			
            this.getRoomAverageScoreByClass()
        },
        //选择班级
        classChange(){
            this.getRoomAverageScoreByClass()
        },
        //获取班级用户诗词竞猜平均分
        async getRoomAverageScoreByClass(){
            var data={
                classId:this.selClass.classId,
                futureId:this.userInfo.futureId,
            }
            var res = await api.getRoomAverageScoreByClass(data)
            if(res.resultCode==1){
                this.gameList=res.value?res.value:[]
            }
            else this.gameList=[]
        },
        lookDetail(val){
            this.$router.push({path:'/poebgdetail',query:{classId:this.selClass.classId,roomId:val}})
        }
    },
}
</script>

<style lang="scss" scoped>
.m-con{
    overflow: hidden;
}
.poetyList{
    width: 100%; height: .64rem; line-height: .64rem;
    background: rgba($color: #05b3b6, $alpha: .1);
    border-radius: .64rem;
    overflow: hidden;
    display: flex;
    font-size: .32rem; color: #05b3b6;
    font-weight: bold;
    .title{
        width: 3.6rem;
        padding-left: .2rem;
    }
    .score{
        width: 1.1rem;
    }
    .num{
        flex: 1;
        text-align: right;
        padding-right: .2rem;
    }
	
}
.list{
	flex: 1;
	overflow-y: auto;
	.list-item{
		display: flex;
		height: 1rem;
		line-height: 1rem;
		font-size: .32rem;
		color: #333333;
		.title{
			width: 3.6rem;
			text-overflow: ellipsis;
			overflow: hidden;
            white-space: nowrap;
            padding-left: .26rem;
		}
		.score{
			width: 1.1rem;
		}
		.num{
			flex: 1;
			position: relative;
			text-align: right;
			padding-right: .6rem;
			&::after{
				content: '';
				position: absolute;
				top: .35rem; right: .2rem;
				width: .25rem; height: .3rem;
				background: url(~@/assets/img/icon/arrow_right_light.png) no-repeat 0 center;
				background-size: 100%;
			}
		}
	}
}

</style>
